<template>
  <div class="boxArea" :style="boxAreaStyle" @click="clearBoxAreaStyle">
    <div class="boxArea-border">
      <div class="area"></div>
      <div class="area"></div>
      <div class="area"></div>
      <div class="area"></div>
      <div class="area corner"></div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    boxAreaStyle: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {};
  },
  methods: {
    clearBoxAreaStyle() {
      this.$emit('clearBoxArea');
    }
  }
};
</script>
<style scoped lang="scss">
.boxArea {
  position: absolute;
  overflow: hidden;
  .boxArea-border {
    width: 100%;
    height: 100%;
    outline: 2px solid #409eff;
    background: linear-gradient(180deg, rgba(181, 209, 255, 0.34) 0, rgba(181, 209, 255, 0.34));
    position: relative;

    .area {
      &.corner {
        position: absolute;
        background-color: rgb(137, 175, 249);
        height: 4px;
        width: 4px;
        border: 2px solid rgb(255, 255, 255);
        display: block;
        right: -4px;
        bottom: -4px;
      }
    }
  }
}
</style>
